.custom-button {
  display: inline-block !important;
  position: relative !important;
  margin: 6px 6px !important;
  padding: 6px 6px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  color: #409EFF !important;
  font-size: 14px !important;
  font-family: inherit !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;

  &::after {
    content: '' !important;
    position: absolute !important;
    z-index: -1 !important;
    border-radius: 4px !important;
    opacity: 0.4 !important;
    background-color: #409EFF !important;
    inset: 60% -6px 0 -6px !important;
    transition: all 150ms ease-in-out !important;
  }

  &:hover::after {
    top: 0% !important;
    opacity: 0.2 !important;
  }

  &:active::after {
    transition: none !important;
    opacity: 0.1 !important;
  }

  &.cancel-button {
    
    &::after {
      background-color: #F56C6C !important;
      opacity: 0.4 !important;
    }

    &:hover::after {
      opacity: 0.3 !important;
    }

    &:active::after {
      opacity: 0.4 !important;
    }
  }


  &.disabled-button {
    &::after {
      color: #00792e !important;
      background-color: #00792e !important;
      opacity: 0.4 !important;
    }

    &:hover::after {
      opacity: 0.4 !important;
    }

    &:active::after {
      opacity: 0.4 !important;
    }
  }

  &.abled-button {
    &::after {
      color: #e85c33 !important;
      background-color: #e85c33 !important;
      opacity: 0.4 !important;
    }

    &:hover::after {
      opacity: 0.3 !important;
    }

    &:active::after {
      opacity: 0.4 !important;
    }
  }

}


.action-buttons {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 180px !important;
  margin: 0 auto !important;
}
